<template>
  <div id="mainLeft">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">班组月产质量（重量箱/一等品率）</span>
        </div>
      </div>
      <div>
        <!--  尝试 el-table       -->
        <el-table v-loading="loading" class="custom-table" :data="yieldList" border>
          <el-table-column label="时间" align="center" prop="time"></el-table-column>
          <el-table-column label="电流(A) CURRENT" align="center" prop="current"></el-table-column>
          <el-table-column label="压力(kg) PREESURE" align="center" prop="preesure"></el-table-column>
          <el-table-column label="牵引比(%)" align="center" prop="drawRatio"></el-table-column>
        </el-table>
        <CenterLeftChart />
      </div>
    </div>
  </div>
</template>

<script>
import CenterLeftChart from '@/components/echart/centerLeft/centerLeftChart4'

export default {

  components: {
    CenterLeftChart
  },
  data() {
    return {
      yieldList: [
        {
          time: '101',
          current: 100,
          preesure: 103,
          drawRatio: 104
        },
        {
          time: '102',
          current: 110,
          preesure: 120,
          drawRatio: 130
        }
      ],
      loading: false
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>

$box-width: 100%;
$box-height: 335px;

#mainLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 35px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
/*.custom-table*/
::v-deep .el-table{
  background:rgba(0,0,0,0.1)
}
::v-deep .el-table_expanded-cell{
  background:rgba(0,0,0,0.1)
}
::v-deep .el-table th{
  background:rgba(0,0,0,0.1)
}
::v-deep .el-table tr{
  background:rgba(0,0,0,0.1)
  /*&:hover {*/
  /*  background:rgba(0,186,255,0.1)*/
  /*}*/
}
::v-deep .el-table td{
  &:hover {
    background:rgba(0,186,255,0.1)
  }
  background:rgba(0,0,0,0.1)
}

/*.custom-table {*/
/*  background-color: transparent; !* 设置表格背景透明 *!*/
/*}*/

/*.custom-table th {*/
/*  color: white; !* 设置表头字体为白色 *!*/
/*}*/

/*.custom-table td {*/
/*  color: white; !* 设置表格内容字体为白色 *!*/
/*}*/

/*.custom-table th.is-leaf {*/
/*  border-bottom: 1px solid white; !* 设置表头底部边框为白色 *!*/
/*}*/

/*.custom-table::before {*/
/*  background-color: transparent; !* 设置表格前边框背景透明 *!*/
/*}*/
</style>
